<div class="full-width container has-tooltip">
  @if (label() || tooltip()) {
    <ix-label
      [label]="label()"
      [tooltip]="tooltip()"
      [required]="required()"
      [ixTestOverride]="controlDirective.name || ''"
    ></ix-label>
  }

  <div class="input-container" [class.disabled]="isDisabled" [class.readonly]="readonly()">
    <textarea
      matInput
      [rows]="rows()"
      [required]="required()"
      [disabled]="isDisabled"
      [readonly]="readonly()"
      [placeholder]="placeholder() || ''"
      [ixTest]="controlDirective.name"
      [attr.aria-label]="label()"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)"
      (blur)="onTouch()"
    ></textarea>
  </div>

  @let control = controlDirective.control;
  @if (control) {
    <ix-errors [control]="control" [label]="label()"></ix-errors>
  }

  @if (hint()) {
    <mat-hint>{{ hint() }}</mat-hint>
  }
</div>
